$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;

  .banner {
    width: 100%;
    position: relative;

    .bg {
      img {
        width: 100%;
        display: block;
        object-fit: cover;
      }
    }

    .t {
      position: absolute;
      left: 50%;
      top: 45%;
      transform: translate(-50%, -50%);
      color: #FFF;
      font-size: $fontSize_54;
      font-weight: 700;
    }

    .add {
      position: absolute;
      left: 50%;
      bottom: 30%;
      transform: translateX(-50%);
      z-index: 10;
      transition: all 600ms;
      img{
        width: 60/$f+vw;
      }
      &:hover {
        transform:translateX(-50%) rotate(180deg);
      }
    }
  }

  .types {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    align-items: center;

    span {
      width: 1px;
      height: 1.5vw;
      background: #E6E6E6;
    }

    a {
      width: 15vw;
      color: #666;
      font-size: $fontSize_16;
      text-align: center;
      position: relative;
      padding: 1.5vw 0;
      transition: all 600ms;

      &::after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 3px;
        background: #79C536;
        transition: all 600ms;
      }

      &:hover {
        color: #79C536;
      }
    }

    .active {
      color: #79C536;

      &::after {
        width: 100%;
      }
    }
  }

  .section1 {
    width: 80vw;
    margin: 4vw auto;

    .list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      a {
        background: #FFF;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.07);
        width: 30.5%;
        margin-left: 2.1%;
        margin-bottom: 3vw;
        .pic{
          overflow: hidden;
          img{
            width: 100%;
            display: block;
            object-fit: cover;
            transition: all 600ms ;
          }
        }
        .text{
          padding: 1vw;
          .time{
            color: #999;
            font-size: $fontSize_16;
          }
          .pt{
            color:rgba(51, 51, 51, 1);
            font-size: $fontSize_22;
            margin-top: 10px;
            transition: all 600ms ;
          }
          .more {
            margin: 1.5vw 0 0 0;
            display: flex;
            align-items: center;

            p {
              color: #999;
              font-size: $fontSize_16;
              margin-right: 8px;
              transition: all 600ms;
            }

            svg {
              path {
                transition: all 600ms;
              }
            }
          }
        }
        &:hover{
          .pic{
            img{
              transform: scale(1.05);
            }
          }
          .text{
            .pt{
              color: #79C536;
            }
            .more {
              p {
                color: #79C536;
              }

              svg {
                path {
                  fill: #79C536;
                }
              }
            }
          }
        }
      }
    }

    .pager {
      display: flex;
      justify-content: center;
      margin-bottom: 6vw;
      align-items: center;

      .nums {
        display: flex;
        margin: 0 10px;

        a {
          width: 33/$f+vw;
          height: 33/$f+vw;
          border: 1px solid #79C536;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          color: #333;
          font-size: $fontSize_14;
          margin: 0 10px;
          transition: all 600ms;

          &:hover {
            background-color: #79C536;
            color: white;
          }
        }

        .active {
          background-color: #79C536;
          color: white;
        }
      }
    }
  }
  
  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .banner{
      .bg{
        img{
          height: 300px;
        }
      }
      .t{
        font-size: 20px;
      }
      .add{
        bottom:25%;
        img{
          width:20px;
        }
      }
    }
    .types{
      a{
        width: 30%;
        font-size: 14px;
        padding: 10px 0;
        &::after{
          height: 2px;
        }
      }
      span{
        height: 10px;
      }
    }
    .section1{
      width: 90%;
      margin: 20px auto 0 auto;
      .list{
        justify-content: space-between;
        a{
          width: 48%;
          margin-left: 0;
          margin-bottom: 15px;
          .text{
            padding: 10px;
            .time{
              font-size: 14px;
            }
            .pt{
              font-size: 18px;
              margin-top: 5px;
            }
            .more{
              p{
                font-size: 14px;
                margin-right: 10px;
              }
            }
          }
        }
      }
      .pager{
        margin-bottom: 40px;
        .nums{
          a{
            font-size: 14px;
            width:30px;
            margin: 0 5px;
            height: 30px;
          }
        }
      }
    }
  }
}